| Vue学习笔记(四)：Vue日期时间格式化 | 您所在的位置：网站首页 › vue jquery时间 › Vue学习笔记(四)：Vue日期时间格式化 |
Vue学习笔记(四)：Vue日期时间格式化
|
1.自定义过滤器对日期进行格式化 （1）日期时间格式，大致可以分为以下四种情况： ① 年月日：yyyy-M-d ② 年月日（小于两位数时补0）：yyyy-MM-dd ③ 年月日时分秒：yyyy-M-d H:m:s ④ 年月日时分秒（小于两位时补0）：yyyy-MM-dd HH:mm:ss （2）针对上述的四种情况，对日期进行格式化处理： {{time}} [yyyy-M-d]：{{time|formatDate('yyyy-M-d')}} [yyyy-MM-dd]：{{time|formatDate('yyyy-MM-dd')}} [yyyy-M-d H:m:s]：{{time|formatDate('yyyy-M-d H:m:s')}} [yyyy-MM-dd HH:mm:ss]：{{time|formatDate('yyyy-MM-dd HH:mm:ss')}} export default { name: 'TimeDemo', data() { return { time:new Date() } }, filters:{ formatDate: function(value,args) { var dt = new Date(value); if(args == 'yyyy-M-d') {// yyyy-M-d let year = dt.getFullYear(); let month = dt.getMonth() + 1; let date = dt.getDate(); return `${year}-${month}-${date}`; } else if(args == 'yyyy-M-d H:m:s'){// yyyy-M-d H:m:s let year = dt.getFullYear(); let month = dt.getMonth() + 1; let date = dt.getDate(); let hour = dt.getHours(); let minute = dt.getMinutes(); let second = dt.getSeconds(); return `${year}-${month}-${date} ${hour}:${minute}:${second}`; } else if(args == 'yyyy-MM-dd') {// yyyy-MM-dd let year = dt.getFullYear(); let month = (dt.getMonth() + 1).toString().padStart(2,'0'); let date = dt.getDate().toString().padStart(2,'0'); return `${year}-${month}-${date}`; } else {// yyyy-MM-dd HH:mm:ss let year = dt.getFullYear(); let month = (dt.getMonth() + 1).toString().padStart(2,'0'); let date = dt.getDate().toString().padStart(2,'0'); let hour = dt.getHours().toString().padStart(2,'0'); let minute = dt.getMinutes().toString().padStart(2,'0'); let second = dt.getSeconds().toString().padStart(2,'0'); return `${year}-${month}-${date} ${hour}:${minute}:${second}`; } } } } p{ text-align: left; }备注：formatDate被定义为接收两个参数的过滤器函数，其中 time 的值作为第一个参数，日期格式字符串（如：'yyyy-MM-dd'）作为第二个参数。 （3）输出结果如下
2.将时间过滤器注册到全局 考虑到代码的复用性，可以将自定义的日期过滤器函数注册到全局。 （1）在common文件夹下新建一个filter.js文件
（2）在filter.js中定义需要使用的过滤器函数 const filter = { formatDate: function(value,args) { var dt = new Date(value); if(args == 'yyyy-M-d') {// yyyy-M-d let year = dt.getFullYear(); let month = dt.getMonth() + 1; let date = dt.getDate(); return `${year}-${month}-${date}`; } else if(args == 'yyyy-M-d H:m:s'){// yyyy-M-d H:m:s let year = dt.getFullYear(); let month = dt.getMonth() + 1; let date = dt.getDate(); let hour = dt.getHours(); let minute = dt.getMinutes(); let second = dt.getSeconds(); return `${year}-${month}-${date} ${hour}:${minute}:${second}`; } else if(args == 'yyyy-MM-dd') {// yyyy-MM-dd let year = dt.getFullYear(); let month = (dt.getMonth() + 1).toString().padStart(2,'0'); let date = dt.getDate().toString().padStart(2,'0'); return `${year}-${month}-${date}`; } else {// yyyy-MM-dd HH:mm:ss let year = dt.getFullYear(); let month = (dt.getMonth() + 1).toString().padStart(2,'0'); let date = dt.getDate().toString().padStart(2,'0'); let hour = dt.getHours().toString().padStart(2,'0'); let minute = dt.getMinutes().toString().padStart(2,'0'); let second = dt.getSeconds().toString().padStart(2,'0'); return `${year}-${month}-${date} ${hour}:${minute}:${second}`; } } } export default filter;（3）在main.js文件中引入filter.js并全局定义过滤器 import filter from './common/filter' for (const key in filter) { Vue.filter(key,filter[key]); }这样我们就可以在项目中的任意一个文件中使用过滤器函数啦。 |
【本文地址】
公司简介
联系我们